<template>
  <div id="lineTip">
    <div class="water-box">
      <div class="water-pipeline clearfix">
        <div class="pipeline" :class="pipeColor1"></div>
        <span class="line-text" :style="textColor1">{{pipeText.waterIn}}</span>
      </div>
      <div class="water-pipeline clearfix" style="margin-top: 8px;">
        <div class="pipeline" :class="pipeColor2"></div>
        <span class="line-text" :style="textColor2">{{pipeText.waterOut}}</span>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'lineTip',
    props: {
      // 文本
       pipeText: {
        type: Object,
        default: () => {
          return {
            waterIn: '',
            waterOut: ''
          }
        }
      },
      pipeColor1: {
        type: String,
        default: ''
      },
      textColor1: {
        type: Object,
        default: () => {
          return {
            color: ''
          }
        }
      },
      pipeColor2: {
        type: String,
        default: () => {
          return ''
        }
      },
      textColor2: {
        type: Object,
        default: () => {
          return {
              color: ''
          }
        }
      }
    },
    data () {
      return {}
    },

    created () {

    },
    mounted () {

    },
    computed: {},
    methods: {},
    destroyed () {

    },
    components: {}
  }
</script>

<style lang='scss' scoped>
  @mixin line-water{
    width:47px;
    height:4px;
    margin-top: 10px;
    margin-right: 12px;
    float: left;
  }
  @mixin tip-text{
    font-size:14px;
    font-family:PingFang-SC-Bold;
    font-weight: 600;
  }
 #lineTip{
   .water-box{
     .water-pipeline{
       .pipeline{
        @include line-water;
       }
       .line-color1{
         background:linear-gradient(0deg,rgba(0,183,235,1),rgba(14,200,253,1),rgba(128,225,253,1),rgba(14,200,253,1),rgba(0,183,235,1))!important;
       }
       .line-color2{
         background:linear-gradient(0deg,rgba(35,120,255,1),rgba(77,146,255,1),rgba(124,175,255,1),rgba(77,146,255,1),rgba(20,111,255,1))!important;
       }
       .line-color3{
         background:linear-gradient(0deg,rgba(91,47,251,1),rgba(126,92,252,1),rgba(168,144,255,1),rgba(126,92,252,1),rgba(91,47,251,1))!important;
       }
       .line-color4{
         background:linear-gradient(0deg,rgba(35,120,255,1),rgba(77,146,255,1),rgba(124,175,255,1),rgba(77,146,255,1),rgba(20,111,255,1))!important;
       }
       .line-text{
         @include tip-text;
       }
     }
   }
 }
</style>
